<template>
	<view>
		<u-divider>选项</u-divider>
		<u-icon label="添加" size="40" name="plus-circle" color="#2979ff" @click="addSelectItem()" class="u-m-l-10">
		</u-icon>
		<u-icon v-if="['CHECKBOX', 'RADIO'].indexOf( optionComponent.typeId) > -1" label="添加其他" size="40" name="plus-circle" color="#2979ff" @click="addSelectOtherItem()" class="u-m-l-10">
		</u-icon>
		<view class="u-m-t-20" v-for="(option,index) in optionComponent.config.options" :key="option.value">
			<u-row>
				<u-col span="10">
					<u-input v-model="option.label" type="text" :border="true" />
				</u-col>
				<u-col span="2">
					<u-icon name="trash" color="#2979ff" size="38" @click="optionComponent.config.options.splice(index, 1)">
					</u-icon>
					<text v-if="option.value==0">其他</text>
				</u-col>
			</u-row>
		</view>

	</view>
</template>

<script>
	import _ from 'lodash'
	import mixin from "./mixin";
	export default {
		mixins: [mixin],
		data(){
			return{
				optionComponent:this.component
			}
		},
		watch: {
			optionComponent: {
				handler(newValue) {
					this.$emit('update:component',newValue)
				},
				deep: true
			}
		},
		methods: {
			addSelectItem() {
				const lastItem = _.last(this.optionComponent.config.options) || {
					value: 0
				}
				const value = lastItem.value !== 0 ? _.max(_.values(this.optionComponent.config.options.map(item => item
					.value))) + 1 : lastItem.value + 1
				this.optionComponent.config.options.push({
					label: '',
					value: lastItem ? value : 1
				})
			},
			addSelectOtherItem() {
				const item = this.optionComponent.config.options.find(option => option.value === 0)
				if (item) {
					return
				}
				this.optionComponent.config.options.push({
					label: '其他',
					value: 0
				})
			}
		}
	}
</script>

<style>
</style>
